<template>
	<view class="container" v-if="isLoading">
		<view class="item">
			<view class="label" v-if="item.status == 1" style="color: #FF9A16; font-size: 28rpx;">待审核</view>
			<view class="label" v-else-if="item.status == 22" style="color: #FF9A16; font-size: 28rpx;">初审通过
			</view>
			<view class="label" v-else-if="item.status == 2" style="font-size: 28rpx;color: #FF9A16; ">待完成
			</view>
			<view class="label" v-else-if="item.status == 3" style="font-size: 28rpx; color: #999999; ">已拒绝
			</view>
			<view class="label" v-else-if="item.status == 4" style="font-size: 28rpx; color: #2BBC4A; ">已完成</view>
			<view class="item-cell flex-ac" style="border-bottom: 1rpx solid #f7f7f7; padding-bottom: 30rpx;">
				<!-- <view class="hd" style="color: #333; font-weight: bold;">送修时间：</view> -->
				<view class="bd">{{item.accidentTime || '-'}}</view>
			</view>
			<view class="item-cell flex-b">
				<view class="hd">报案号：</view>
				<view class="bd">{{item.accidentNo || '-'}}</view>
			</view>
			<view class="item-cell flex-b">
				<view class="hd">司机姓名：</view>
				<view class="bd">{{item.driverName || '-'}}</view>
			</view>
			<view class="item-cell flex-b">
				<view class="hd">车牌号：</view>
				<view class="bd">{{item.carNo || '-'}}</view>
			</view>
			<view class="item-cell flex-b">
				<view class="hd">发生地点：</view>
				<view class="bd">{{item.address || '-'}}</view>
			</view>
			<view class="item-cell flex-b">
				<view class="hd">责任认定：</view>
				<view class="bd">{{item.dutyExplain || '-'}}</view>
			</view>
			<view class="item-cell" style="border-top: 1rpx solid #f7f7f7;">
				<view class="hd">事故原因：</view>
				<view class="bd" style="margin-top: 20rpx;">{{item.accidentExplain || ''}}</view>
			</view>
			<view class="item-cell" style="padding-top: 28rpx;">
				<view class="hd">故障图片：</view>
				<view class="bd flex-wrap" style="margin-top: 20rpx;">
					<image class="img" :src="item.imgUrls" mode="aspectFill"></image>
				</view>
			</view>

			<view class="item-cell flex-b">
				<view class="hd">定损人</view>
				<view class="bd">{{item.lossUserName	 || ''}}</view>
			</view>
			<view class="item-cell flex-b">
				<view class="hd">定损金额</view>
				<view class="bd">{{item.lossMoney || ''}}元</view>
			</view>
			<view class="item-cell flex-b">
				<view class="hd">垫付金额</view>
				<view class="bd">{{item.insuranceMoney || ''}}元</view>
			</view>
			<view class="item-cell flex-b">
				<view class="hd">保险赔偿</view>
				<view class="bd">{{item.padPayMoney || ''}}元</view>
			</view>
			<view class="item-cell flex-b">
				<view class="hd">修理厂</view>
				<view class="bd">{{item.repairFactory || ''}}</view>
			</view>
			<view class="item-cell flex-b">
				<view class="hd">医院</view>
				<view class="bd">{{item.hospital || ''}}</view>
			</view>
			<view class="item-cell flex-b">
				<view class="hd">法院</view>
				<view class="bd">{{item.court || ''}}</view>
			</view>
			<view class="item-cell flex-b">
				<view class="hd">备注</view>
				<view class="bd">{{item.remark || ''}}</view>
			</view>
		</view>
		<view class="item" style="margin-top: 30rpx;">
			<view class="item-cell" style="padding-bottom: 30rpx; padding-top: 20rpx;">
				<!-- <view class="hd" style="color: #333; font-weight: bold;">送修时间：</view> -->
				<view class="bd" style="font-size: 30rpx; font-weight: bold;">跟进信息</view>
				<view style="padding: 20rpx 0;">
					<view class="dot" v-for="(el, idx) in list" :key="idx">
						<view class="flex-ac">
							<view class="index flexmid">{{idx + 1}}</view>
							<view class="time">{{el.createTime}}</view>
						</view>
						<view class="desc">{{el.content}}</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLoading: false,
				item:{},
				list: []
			}
		},
		onLoad(opt) {
			if(opt) console.log('opt:', opt)
			this.id = opt.id
		},
		onShow() {
			setTimeout(()=>{
				this.getInfo()
			}, 300)
		},
		methods: {
			getInfo(){
				this.$Net.get('/carAccident/detail/' + this.id). then(res=>{
					this.item = res.data.carAccident
					this.list = res.data.carAccidentFollows
					this.isLoading = true
				})
			}
		}
	}
</script>

<style lang="scss">
	page{ background-color: #f9f9f9; }
</style>

<style lang="scss" scoped>
	.dot{
		padding-left: 16rpx;
		margin-bottom: 30rpx;
		.index{
			width: 40rpx;
			height: 40rpx;
			border: 1rpx solid #999;
			color: #000;
			font-size: 24rpx;
			margin-right: 20rpx;
			border-radius: 50%;
		}
		.time{
			color: #000;
			font-size: 26rpx;
		}
		.desc{
			padding-top: 14rpx;
			padding-left: 60rpx;
		}
	}
	.dot:last-child{
		margin-bottom: 0;
	}
	// @import './style.scss';
	.foot {
		width: 100%;
		padding: 30rpx;
		padding-top: 120rpx;
		.btnBox {
			width: 100%;
	
			.btn-1 {
				flex: 1;
				height: 90rpx;
				background: #1684FC;
				border-radius: 10rpx;
				color: #ffffff;
				font-size: 34rpx;
			}
	
			.btn-2 {
				flex: 1;
				height: 90rpx;
				border: 1px solid #1684FC;
				border-radius: 10rpx;
				color: #1684FC;
				font-size: 34rpx;
			}
		}
	}
	.container {
		width: 100%;
		// height: 100vh;
		padding: 20rpx;
		flex: 1;
		overflow: hidden;
	
		.item {
			width: 100%;
			border-radius: 20rpx;
			background-color: #fff;
			// padding-top: 0rpx;
			padding-bottom: 20rpx;
			// margin-bottom: 20rpx;
			position: relative;
			padding-top: 10rpx;
			.tit {
				width: 100%;
				height: 100rpx;
				border-bottom: 1rpx solid #f7f7f7;
				padding: 0 30rpx;
	
				.rili {
					width: 50rpx;
					height: 50rpx;
					margin-right: 12rpx;
				}
			}
	
			.label {
				position: absolute;
				top: 30rpx;
				right: 30rpx;
				font-size: 26rpx;
			}
	
			.item-name {
				font-weight: bold;
				font-size: 40rpx;
				color: #3F4151;
				margin-top: 26rpx;
			}
	
			.item-cell {
				margin-top: 26rpx;
				padding: 0 30rpx;
	
				.hd {
					font-size: 28rpx;
					color: #333;
					// width: 10rpx;
					flex-shrink: 0;
					font-weight: bold;
					margin-right: 30rpx;
				}
	
				.bd {
					font-size: 28rpx;
					.img{
						width: 150rpx;
						height: 150rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
					}
				}
	
				.carNo {
					font-size: 36rpx;
					color: #000;
					font-weight: bold;
					margin-right: 30rpx;
				}
	
				.driver {
					font-size: 28rpx;
					color: #666;
				}
			}
	
			.item-cell:first-child {
				margin-top: 0;
			}
	
			.item-btn {
				width: 100%;
				flex-direction: row-reverse;
				margin-top: 30rpx;
				padding-top: 20rpx;
				border-top: 1rpx solid #f7f7f7;
	
				.btn-1 {
					width: 140rpx;
					height: 70rpx;
					border: 2rpx solid #cbcbcb;
					border-radius: 8rpx;
					font-size: 30rpx;
					color: #777C99;
				}
	
				.btn-2 {
					width: 120rpx;
					height: 60rpx;
					border: 2rpx solid #999;
					border-radius: 8rpx;
					// font-size: 28rpx;
					color: #999;
					margin-left: 20rpx;
				}
	
				.btn-3 {
					width: 120rpx;
					height: 60rpx;
					border: 1rpx solid #40A9FF;
					border-radius: 10rpx;
					color: #40A9FF;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>
